<template>
  <view class="page">
    <view class="order_number twelve_font">
      <view class="flex flex_row_between">
				<text style="font-size: 26rpx">{{ item.order_sn }}</text>
      	<text style="font-size: 26rpx">{{ item.date_range }}</text>
			</view>
    </view>
		<view style="font-size: 30rpx;color: #000;margin-top: 20rpx;font-weight: bold;">
			<text>{{ item.package_menu_name }}</text>
		</view>
    <view class="" v-if="item.lookDetail && item.goods.length">
      <view
        style="flex-basis: 100%;margin-top: 20rpx"
        v-for="goodsItem in item.goods"
        :key="goodsItem.id"
				class="goods-item"
      >
        <view class="flex-btw">
          <text>{{ goodsItem.order_sn }}</text>
          <text :class="item.order_status == '已取消' ? 'gray_font':item.order_status == '待审核' ?'red_font':'dgreen'">{{ goodsItem.order_status }}</text>
        </view>
        <view class="flex-middle">
          <view class="imgs flex-middle">
            <image class="img" :src="goodsItem.img" mode="aspectFit"></image>
          </view>
          <view class="order_info fourteen">
            <view class="flex flex_row_between">
              <view class="color85">{{ goodsItem.goods_name }}
                <text v-if="item.goods_num > 1" style="margin-left: 10rpx"
                  >等商品</text
                >
              </view>
              <view style="color: #adaeaf">
                <text> 共 {{ goodsItem.goods_num }} 件</text>
                <u-icon name="arrow-right" color="gray" size="18"></u-icon>
              </view>
            </view>
            <view class="color85"> 下单时间：{{ goodsItem.created_at }}</view>
            <view class="color85"> 配送日期：{{ goodsItem.send_time }} </view>
            <view class="total flex-end">
				      <view style="color:gray">
				      	配送金额:<text class="">￥{{Number(goodsItem.send_money).toFixed(2)}}</text> 
				      </view>
				      <view>
				      	实付金额:<text class="red_font fonts_26">￥{{Number(goodsItem.real_money).toFixed(2)}}</text> 
				    </view>
			    </view>
          </view>
        </view>
      </view>
    </view>
    <view class="total">
      <view
        class="info-look"
        v-if="!item.lookDetail"
        @click.stop="changeLookDetail(item)"
      >
        <text>展开详情</text>
        <u-icon name="arrow-down"></u-icon>
      </view>
      <view class="info-look" v-else @click.stop="changeLookDetail(item)">
        <text>收起详情</text>
        <u-icon name="arrow-up"></u-icon>
      </view>
      <view>
        实付金额:<text class="red_font fonts_26"
          >￥{{ item.order_amount }}</text
        >
      </view>
    </view>
    <view class="select_button text_right" v-if="false">
      <text
        class="cancel_order"
        v-show="item.order_status == 0"
        @click.stop="clickbtn('cancelOrder', item.id, '取消订单')"
        >取消订单</text
      >
      <text
        class="confirm_pay"
        v-show="
          item.order_status == 0 && item.is_prior_payment == 1 && !timeend
        "
        @click.stop="clickbtn('toPay', item.id)"
        >立即支付</text
      >
      <text
        class="check_log"
        v-show="item.order_status == 2"
        @click.stop="clickbtn('getLogistics', item.id, '查看物流')"
        >查看物流</text
      >
      <text
        class="return_good"
        v-show="item.order_status == 2"
        @click.stop="clickbtn('getOrderDetail', item.id, '申请退货')"
        >申请退货</text
      >
      <text
        class="confirm_good"
        v-show="item.order_status == 2"
        @click.stop="clickbtn('confirmOrder', item.id, '确认收货')"
        >确认收货</text
      >
      <text
        class="another_order"
        v-show="item.order_status == 3 || item.order_status == 4"
        @click.stop="clickbtn('onceAgain', item.id, '再来一单')"
        >再来一单</text
      >
    </view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  props: ["item"],
  data() {
    return {
      logo: "",
      showLogo: 0,
      times: null,
      timeend: false, //时间是否到了
      stateList: [
        { name: "待审核" },
        { name: "备货中" },
        { name: "配送中" },
        { name: "已完成" },
        { name: "已取消" },
      ],
    };
  },
  mounted() {
    this.logo = uni.getStorageSync("logo");
    this.showLogo = uni.getStorageSync("showLogo");
    this.times =
      1800 + Number(this.item.created_at) - new Date().getTime() / 1000;
    if (this.times <= 0) {
      this.timeend = true;
    }
  },
  methods: {
    clickbtn(type, id, msg) {
      this.$emit("clickbtn", { type, id, msg });
    },
    timeEnd() {
      this.timeend = true;
      this.$emit("getData", 1);
    },
    changeLookDetail(item) {
			this.$emit('changeLookDetail', item)
		},
  },
};
</script>

<style lang="scss" scoped>
.page {
  font-size: 26rpx;
	.goods-item {
		border-bottom: 1rpx solid #ECECEC;
		padding-bottom: 30rpx;
	}
  .imgs {
    width: 120rpx;
    height: 120rpx;
    position: relative;
    .logo {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .img {
      width: 112rpx;
      height: 80rpx;
      margin-right: 22rpx;
    }
  }
  .order_number {
    height: 64rpx;
    line-height: 64rpx;
    border-bottom: 1px solid #ececec;
    color: rgba(0, 0, 0, 0.55);
  }
	.color85 {
		color: rgba(0, 0, 0, 0.85);
	}

  .order_info {
    flex-basis: 100%;
    > view {
      margin: 10rpx 0;
    }
  }

  .sign_order:nth-child(n + 2) {
    margin-top: 20rpx;
  }
  .select_button {
    padding: 26rpx 0;

    .another_order,
    .confirm_pay {
      border-color: $dgreen;
      color: $dgreen;
    }

    .look_logist,
    .cancel_order {
      color: #8f8f8f;
    }

    .confirm_good {
      color: #e53131;
    }
    .return_good {
      color: #fd5e2e;
    }
  }

  .select_button > text {
    border: 1px solid;
    padding: 8rpx 22rpx;
    margin-left: 24rpx;
    font-size: 24rpx;
    border-radius: 24rpx;
  }
  .top_title {
    .user-icon {
      height: 30rpx;
    }
    .account {
      margin-left: 10rpx;
    }
  }
}
.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding-bottom: 20rpx;
  view {
    margin-left: 10rpx;
    &:not(:last-of-type) {
      font-size: 24rpx;
    }
  }
}
</style>
